<template>
	<view class="container">
		<view class="sub">
			<view class="join_bg">
				<view class="section">
					<view class="name">姓名<view class="red">*</view></view>
					<view class="input-bg">
						<input class="input" v-model="name" placeholder="请输入姓名">
					</view>
				</view>
				<view class="section">
					<view class="name">地址</view>
					<view class="show-bg">
						<view class="text-place" @click="select(2)" v-if="address == ''">请选择</view>
						<view class="text" @click="select(2)" v-else>{{address}}</view>
						<image class="icon" @click="selectAddress()" src="../../../../static/images/current_loc.png"></image>
					</view>
				</view>
				<view class="section">
					<view class="name">详细简介</view>
					<view class="input-bg">
						<textarea class="textarea" v-model="intro" placeholder="请填写详细简介"></textarea>
					</view>
				</view>
				
				<view class="section">
					<view class="name">轮播图<view class="red">*</view></view>
					<view class="image-bg">
						<view class="imgs">
							<view class="img-item" v-for="(next, n_index) in carousel" :key="n_index">
								<image class="image" :src="next"></image>
								<image class="del" @click="delImg(n_index)" src="../../../../static/images/common/del.png"></image>
							</view>
							<view class="img-item" @click="choosePhoto(3)" v-if="carousel.length < 5">
								<image class="image" src="../../../../static/images/common/add-pic.png"></image> 
							</view>
						</view>
					</view>
				</view><!-- section end -->
			</view>
		
			<view class="footer">
				<view class="submit" @click="submit()">确认保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {tecer_info_save,get_tecer_info} from '@/api/platform';
	export default {
		data() {
			return {
				id:undefined,
				name:'',//名称
				intro:'',//简介 
				address:'',
				lon:0,
				lat:0,
				carousel:[]
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			//获取数据
			loadData(){
				let that = this;
				uni.showLoading({
					title: '正在加载',
				})
				get_tecer_info({}).then(res => {
					uni.hideLoading();
					if(res.status == 200){
						that.name = res.data['real_name'];
						that.address = res.data['address'];
						that.intro = res.data['intro'];
						let carousel = res.data['carousel'];
						that.carousel = carousel.split(',');
					}else{
						uni.showToast({
							icon:'error',
							title:res.msg
						})
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
			},
			selectAddress(){
				let that = this;
				uni.authorize({
					scope:"scope.userLocation",
					success(res) {
						uni.chooseLocation({
							success(res) {
								console.info(res)
								that.address = res.address;
								that.lon = res.longitude;
								that.lat = res.latitude;
							}
						})
					},
					fail(err) {
						
					}
				})
			},
			delImg(index){
				this.carousel.some((item, i)=>{
	　　　　　　　　　　if(i==index){
	　　　　　　　　　　　　this.carousel.splice(i, 1)
	　　　　　　　　　　　　return true;
	　　　　　　　　　　}
	　　　　　　　　})
						
			},
			choosePhoto(type) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.carousel.push(res.data.url);
				});
			},
			//提交
			submit(){
				if(this.name.length == 0 || this.name.length > 50){
					uni.showToast({
						icon:'none',
						title:'请输入姓名'
					})
					return;
				}
				if(this.address.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择地址'
					})
					return;
				}
				if(this.intro.length == 0){
					uni.showToast({
						icon:'none',
						title:'请输入个人简介'
					})
					return;
				}
				
				if(this.carousel.length == 0){
					uni.showToast({
						icon:'none',
						title:'请上传轮播图'
					})
					return;
				}
				
				let data = {
					id:this.id,
					name:this.name,
					address:this.address,
					intro:this.intro,
					carousel:this.carousel.join(',')
				};
				let that = this;
				if(this.operationing){
					return;
				}
				uni.showModal({
				    title: '提示',
				    content: '确定提交？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							
							tecer_info_save(data).then(res => {
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									uni.showToast({
										icon:'success',
										title:res.msg
									})
									setTimeout(function(){
										uni.navigateBack();
									},1000);
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.info{
			display: flex;
			flex-direction: column;
			.finished{
				display: flex;
				flex-direction: column;
				padding: 50rpx 0rpx;
				align-items: center;
				.icon{
					width: 100rpx;
					height: 100rpx;
				}
				.text{
					font-size: 28rpx;
					color: black;
					margin-top: 30rpx;
				}
			}
			.status{
				padding: 50rpx 0rpx;
				text-align: center;
				color: red;
				background-color: white;
			}
			.main{
				margin-top: 10rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				padding: 0rpx 30rpx;
				.section{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					height: 80rpx;
					align-items: center;
					border-bottom: 1rpx solid #f1f1f1;
					.title{
						font-size: 28rpx;
						color: black;
						
						
						.cover{
							width: 24rpx;
							height:24rpx;
							margin-right: 10rpx;
						}
					}
					.text{
						font-size: 28rpx;
						color:black;
					}
				}
			}
			.img_info{
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx;
				.title{
					font-size: 28rpx;
					color: black;
				}
				.content{
					display: flex;
					flex-direction: row;
					.img{
						height: 200rpx;
						width: 45%;
						background-color: #f5f5f5;
						margin-left: 15rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
					}
				}
			}
			.footer{
				margin-top: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding-bottom: 150rpx;
				.submit{
					height: 80rpx;
					width: 75%;
					background-color: #2BA5FF;
					line-height: 80rpx;
					border-radius: 40rpx;
					text-align: center;
					color: white; 
				}
			}
		}
		.sub{
			display: flex;
			flex-direction: column;
			.top_bg{
				height: 343rpx;
				background: linear-gradient(180.00deg, #2ba5ff 0%, #0077d0 100%);
				display: flex;
				flex-direction: column;
				.big_title{
					font-size: 72rpx;
					color: white;
					font-weight: bold;
					margin-top: 80rpx;
					margin-left: 50rpx;
				}
				.small_desc{
					font-size: 28rpx;
					color: white;
					font-weight: bold;
					margin-left: 70rpx;
					margin-top: 10rpx;
					.org{
						color: darkorange;
					}
				}
			}
			.join_bg{
				margin-top: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background-color: white;
				// height: 1000rpx;
				padding-bottom: 20rpx;
				.section{
					display: flex;
					flex-direction: column;
					background-color: white;
					padding: 20rpx;
					.name{
						font-size: 28rpx;
						color: black;
						display: flex;
						flex-direction: row;
						.red{
							color: red;
						}
					}
					.input-bg{
						margin-top: 20rpx;
						border: 1rpx solid #f1f1f1;
						display: flex;
						flex-direction: row;
						.input{
							font-size: 28rpx;
							color: black;
							flex: 1;
							height: 50rpx;
							padding: 10rpx;
							border-radius: 20rpx;
						}
						.textarea{
							font-size: 28rpx;
							color: black;
							flex: 1;
							height: 150rpx;
							padding: 10rpx;
							border-radius: 20rpx;
						}
						.icon{
							width:50rpx;
							height:50rpx;
							margin-left: 15rpx;
						}
					}
					.show-bg{
						margin-top: 20rpx;
						border: 1rpx solid #f1f1f1;
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 78rpx;
						padding: 10rpx;
						.text{
							font-size: 28rpx;
							color: black;
							flex: 1;
						}
						.text-place{
							font-size: 28rpx;
							color: gray;
							flex: 1;
						}
						.icon{
							width:50rpx;
							height:50rpx;
							margin-left: 15rpx;
						}
					}
					.image-bg{
						display: flex;
						flex-direction: row;
						margin-top: 20rpx;
						.imgs{
							width: 100%;
							display: flex;
							// padding-left: 10rpx;
							// padding-right: 10rpx;
							flex-direction: row;
							flex-wrap: wrap;
							.img-item{
								width: 30%;
								height:180rpx; 
								.image{ 
									width:85%;
									height:85%;
								}
								.del{
									width:50rpx;
									height:50rpx;
									margin-left: -30rpx;
									margin-top: -20rpx;
									z-index: 99;
									position: absolute;
								}
							}
						}
					}
				}
				.img_bg{
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					.title{
						font-size: 28rpx;
						color: black;
						margin-left: 20rpx;
					}
					.content{
						display: flex;
						flex-direction: row;
						margin-top: 20rpx;
						.default{
							height: 200rpx;
							width: 45%;
							background-color: #f5f5f5;
							margin-left: 15rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							border-radius: 10rpx;
							.make_phone{
								width:80rpx;
								height:80rpx;
							}
							.desc{
								font-size: 28rpx;
								color: darkgray;
								margin-top: 20rpx;;
							}
						}
					}
				}
				.protocol_bg{
					margin-top: 50rpx;
					display: flex;
					flex-direction: row;
					margin-left: 30rpx;
					margin-right: 30rpx;
					.radio{
						width: 40rpx;
						height:40rpx;
					}
					.text{
						margin-left: 10rpx;
						color: #000000;
						font-size: 28rpx;
					}
					.role{
						color: red;
						font-size: 28rpx;
					}
				}
			}//join_bg end
			
			
			.footer{
				margin-top: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding-bottom: 150rpx;
				.submit{
					height: 80rpx;
					width: 75%;
					background-color: #2BA5FF;
					line-height: 80rpx;
					border-radius: 40rpx;
					text-align: center;
					color: white; 
				}
			}
		}
	}
</style>
